<template>
  <div>
    <p>foo: {{foo}}</p>
    <p>bar: {{bar}}</p>
    <button @click="foo+=1">foo+1</button>
    <button @click="addBar">bar+1</button>
  </div>
</template>

<script>
  import { reactive, toRefs } from "@vue/composition-api";

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  });

  // logic operating on state

  // convert to refs when returning
  // return toRefs(state);
  return state;
}

export default {
  setup(props, ctx) {
    // can destructure without losing reactivity
    /** 经过测试貌似不用toRefs也不会丢失 reactivity
     * 比如你点击foo+1,还是有响应的
     * 它这里时候的丢失响应,应该是指你不是直接在模板里foo+1
     * 而是在setup里用一个函数对其包裹并暴露给模板,模板通过调用这个函数来foo+1的话就会丢失响应性,比如点击上面的bar+1
     * 另外需要注意经过toRefs包裹,我们在setUp里操作时要通过.value操作*/
    let {foo, bar} = useFeatureX();
    // const addBar = () => {
    //   bar = bar + 1;
    // };
    const addBar = () => {
      bar = bar + 1;
    };
    return {
      foo,
      bar,
      addBar
    };
  }
};
</script>

<style lang="scss" scoped></style>
